<template>
  <div class="app-container">
    <!-- 表格 -->
    <el-card v-if="pageState=='list'" class="box-card">
      <img
        class="watermark"
        v-if="baseApi== 'https://testouhun.wm2177.com'"
        style="right: 0;"
        src="@/assets/watermark.png"
      />

      <el-button type="primary" style="margin-bottom:20px" @click="addList">添加</el-button>
      <el-table
        :data="tableData"
        :header-cell-style="{background:'#eee'}"
        border
        v-loading="loading"
        style="width: 100%;margin-bottom: 20px;"
      >
        <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
        <el-table-column align="center" prop="grade" label="等级">
          <template
            slot-scope="scope"
          >{{ optionsLevel.find(item => item.value == scope.row.grade).label}}</template>
        </el-table-column>
        <el-table-column align="center" prop="name" label="能量球名称"></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="250">
          <template slot-scope="scope">
            <el-button @click="handleEdite(scope.row)" type="text" size="small">编辑</el-button>
            <el-popconfirm
              confirmButtonText="好的"
              cancelButtonText="不用了"
              icon="el-icon-info"
              iconColor="red"
              title="这是一段内容确定删除吗？"
              @onConfirm="handleDel(scope.row)"
            >
              <el-button
                style="margin-left:10px;color:red"
                slot="reference"
                type="text"
                size="small"
              >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align:right">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :total="total"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </el-card>

    <el-card class="box-card" v-if="pageState!='list'">
      <div slot="header" class="clearfix">
        <span>{{pageState=='add'?'新增':'编辑' }}</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="backList()">返回</el-button>
      </div>
      <Form v-if="pageState!='list'" @tolist="tolist" :dataId="dataId"></Form>
    </el-card>
  </div>
</template>

<script>
import { getToken } from '@/api/qiniu'
import { categoryList } from '@/api/product'

import {
  energyList,
  addEnergy,
  editEnergy,
  energyDetails,
  delEnergy
} from '@/api/energy'
import { parseTime } from '@/utils/index'
import { options } from 'runjs'
import Form from './bcomponent/form.vue'

export default {
  name: 'PropductList',
  components: {
    Form
  },
  data() {
    return {
      baseApi: process.env.VUE_APP_BASE_API,
      // 分页数据
      total: 0,
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      pageState: 'list',
      dataId: '',
      // 等级
      optionsLevel: [
        {
          value: '1',
          label: '等级1'
        },
        {
          value: '2',
          label: '等级2'
        },
        {
          value: '3',
          label: '等级3'
        },
        {
          value: '4',
          label: '等级4'
        },
        {
          value: '5',
          label: '等级5'
        }
      ],
      // 编辑抽屉
      drawer: false,
      direction: 'rtl',
      title: '编辑',

      loading: false,
      options: [],
      categoryLoading: false
    }
  },
  mounted() {
    this.getCategary()
    // this.getToken()
    this.getInit()
  },
  methods: {
    backList() {
      this.dataId = ''
      this.pageState = 'list'
    },
    getInit() {
      energyList({
        page: this.currentPage,
        limit: this.pageSize
      }).then((res) => {
        console.log(res)
        this.tableData = res.data
        this.total = res.total
        console.log(this.tableData)
      })
    },
    tolist() {
      this.dataId = ''
      this.pageState = 'list'
      this.getInit()
    },
    // 获取商品分类
    async getCategary() {
      this.categoryLoading = true
      const res = await categoryList({ page: 1, limit: 999, keywords: '' })
      console.log(res)
      this.categoryLoading = false
      this.options = res.data
    },
    addList() {
      this.pageState = 'add'
      // alert(this.pageState)
    },
    async handleDel(row) {
      console.log(row)
      try {
        const res = await delEnergy({ id: row.id })
        this.getInit()
        // this.getProductList()
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      } catch (error) {
        this.$message.error('删除失败')
        console.log(error)
      }
    },
    handleEdite(row) {
      this.dataId = row.id
      // this.form = Object.assign({}, row, {
      //   imageUrl: row.img || '',
      //   bg_imgUrl: row.bg_imgUrl || ''
      // })
      // this.imageUrl = row.img
      // this.bg_imgUrl = row.bg_imgUrl
      this.drawer = true
      this.pageState = 'edit'
    },
    //分页改变
    async currentChange(current) {
      this.currentPage = current
      await this.getBoxRewardList()
      const select = []
      console.log(this.form.goods_data)
      if (this.form.goods_data) {
        this.form.goods_data.forEach((good) => {
          this.boxRewardData.forEach((item) => {
            if (good.goods_id == item.id) {
              select.push(item)
            }
          })
        })
      }
      this.toggleSelection(select)
    }
  }
}
</script>

<style lang="scss" scoped>
.query-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  ::v-deep .el-form {
    display: flex;
  }
}
.box-card {
  margin-bottom: 20px;
}
.search {
  display: flex;
  align-items: center;
}

::v-deep .el-drawer.rtl {
  width: 650px !important;
  overflow: auto;
}
// 上传图片
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>